<template>
  <div class="superviseTask">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="true" :titelText="id == '' || reCheck == 1 ? '新建任务' : '编辑任务'" :slefBack="true"
        @goBack="goBack"></header-nav>
    </div>

    <div class="task">
      <van-form @submit="onSubmit">
        <!-- <van-field v-model="taskForm.checkTypeName" is-link readonly required label="检查类型" placeholder="请选择"
          @click="checkTypeSelect" /> -->
        <van-field v-model="taskForm.checkerName" readonly required label="主办人" />
        <van-field v-model="taskForm.organizerName" is-link readonly required placeholder="请选择" label="协办人"
          @click="organizerSelect" />
        <div class="line10"></div>
        <div class="partyType">
          <div class="title">
            <span style="color: #ee0a24; margin-right: 2px">*</span>当事人类型
          </div>
          <div class="party" style="margin-bottom: 12px">
            <div class="partyItem1" :class="taskForm.placeInfo.partyType == 0 ? 'partyItem1Active' : ''
        " @click="setPartyType(0)">
              自然人
            </div>
            <div class="partyItem2" :class="taskForm.placeInfo.partyType == 1 ? 'partyItem1Active' : ''
        " @click="setPartyType(1)">
              法人
            </div>
          </div>
          <div class="party">
            <div class="partyItem1" :class="taskForm.placeInfo.partyType == 3 ? 'partyItem1Active' : ''
        " @click="setPartyType(3)">
              非法人组织
            </div>
            <div class="partyItem2" :class="taskForm.placeInfo.partyType == 2 ? 'partyItem1Active' : ''
        " @click="setPartyType(2)">
              个体工商户
            </div>
          </div>
        </div>
        <van-popover v-model:show="showPopover" :actions="actions" @select="actionsSelect">
          <template #reference>
            <van-field v-model="taskForm.placeInfo.placeName" @update:model-value="changePlaceName" required
              :maxlength="taskForm.placeInfo.partyType == 2 ? '15' : '16'" :label="taskForm.placeInfo.partyType == 0
        ? '姓名'
        : taskForm.placeInfo.partyType == 2
          ? '字号名称'
          : '单位名称'
        " placeholder="请输入" />
          </template>
        </van-popover>
        <div class="sex" v-if="taskForm.placeInfo.partyType == 0">
          <div class="title">
            <span style="color: #ee0a24; margin-right: 2px">*</span>性别
          </div>
          <van-radio-group v-model="taskForm.placeInfo.sex" direction="horizontal">
            <van-radio name="1" style="margin-right: 52px">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </div>
        <van-field v-if="taskForm.placeInfo.partyType == 0" v-model="taskForm.placeInfo.birthDate" is-link readonly
          required label="出生日期" placeholder="请选择" @click="birthDateSelect" />
        <van-field v-model="taskForm.placeInfo.contactsTel" required :label="taskForm.placeInfo.partyType == 0 ? '联系电话' : '单位联系电话'
        " maxlength="13" placeholder="请输入" />
        <van-field v-if="taskForm.placeInfo.partyType == 0" v-model="taskForm.placeInfo.idTypeName" is-link readonly
          required label="证件类型" placeholder="请选择" @click="idTypeSelect" />
        <van-field v-if="taskForm.placeInfo.partyType == 0" v-model="taskForm.placeInfo.idCode" required label="证件号码"
          maxlength="18" placeholder="请输入" />
        <van-field v-if="taskForm.placeInfo.partyType != 0" v-model="taskForm.placeInfo.idCode" required maxlength="18"
          label="社会信用代码" placeholder="请输入" />
        <van-field v-if="taskForm.placeInfo.partyType != 0" v-model="taskForm.placeInfo.headName" required :label="taskForm.placeInfo.partyType == 1
        ? '法人'
        : taskForm.placeInfo.partyType == 3
          ? '负责人'
          : '经营者姓名'
        " placeholder="请输入" maxlength="16" />
        <van-field v-if="taskForm.placeInfo.partyType == 1 ||
        taskForm.placeInfo.partyType == 3
        " v-model="taskForm.placeInfo.headTel" required :label="taskForm.placeInfo.partyType == 1 ? '法人电话' : '负责人电话'"
          placeholder="请输入" maxlength="13" type="digit" />

        <!-- <van-field v-if="taskForm.placeInfo.partyType == 1 ||
          taskForm.placeInfo.partyType == 3" required v-model="taskForm.placeInfo.lnglat" is-link readonly
          name="picker" label="经纬度" placeholder="点击选择经纬度" @click="gotoMap" /> -->

        <div class="line10"></div>
        <div v-if="taskForm.placeInfo.partyType != 0">
          <div class="area">
            <div class="title">
              <span style="color: #ee0a24; margin-right: 2px">*</span>
              注册地址
            </div>
          </div>
          <van-field style="padding-left: 24px !important" v-model="areaValue" is-link readonly label="所属地区"
            placeholder="请选择所在地区" @click="areaShow = true" />
          <van-field style="padding-left: 24px !important" v-model="taskForm.placeInfo.registerAddress" type="textarea"
            rows="1" autosize label="详细地址" placeholder="请输入" maxlength="68" />
        </div>

        <div class="area">
          <div class="title">
            <span style="color: #ee0a24; margin-right: 2px">*</span>
            <span>{{
        taskForm.placeInfo.partyType == 0 ? '住址' : '经营地址'
      }}</span>
          </div>
        </div>
        <van-field style="padding-left: 24px !important" v-model="areaValue2" is-link readonly label="所属地区"
          placeholder="请选择所在地区" @click="areaShow2 = true" />
        <van-field style="padding-left: 24px !important" v-model="taskForm.placeInfo.operateAddress" type="textarea"
          rows="1" autosize label="详细地址" placeholder="请输入" maxlength="68" />

        <div class="submitBtn">
          <van-button plain block type="primary" class="btn-left" native-type="submit" style="margin-right: 8px">
            保存
          </van-button>
          <van-button block type="primary" class="btn-right" @click="goCheck()">
            开始检查
          </van-button>
        </div>
      </van-form>

      <!-- 类型，方式选择 -->
      <van-popup v-model:show="picker" round position="bottom">
        <van-picker :columns="pickerData" @cancel="picker = false" @confirm="pickerConfirm" />
      </van-popup>

      <!-- 协办人 -->
      <van-popup v-model:show="organizerPicker" round position="bottom">
        <van-picker :columns="organizerData" @cancel="organizerPicker = false" @confirm="organizerConfirm" />
      </van-popup>

      <!-- 日期选择 -->
      <van-popup v-model:show="birthdatePicker" round position="bottom">
        <van-date-picker v-model="currentDate" :min-date="minDate" title="选择年月" :columns-type="columnsType"
          @cancel="birthdatePicker = false" @confirm="birthdatePickerConfirm" />
      </van-popup>

      <!-- 住址，注册地区选择 -->
      <van-popup v-model:show="areaShow" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="aeraData" :field-names="{
        text: 'name',
        value: 'code',
        children: 'children',
      }" @close="areaShow = false" @finish="onFinish" />
      </van-popup>

      <!-- 经营地址选择 -->
      <van-popup v-model:show="areaShow2" round position="bottom">
        <van-cascader v-model="cascaderValue2" title="请选择所在地区" :options="aeraData2" :field-names="{
        text: 'name',
        value: 'code',
        children: 'children',
      }" @close="areaShow2 = false" @finish="onFinish2" />
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import {
  showNotify,
  showSuccessToast,
  showFailToast,
  showConfirmDialog,
} from 'vant'
import aeraData from '../../util/pcas-code.json'
import aeraData2 from '../../util/pcas-code.json'
const { usePublic, useDays } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const reCheck = ref(route.query.reCheck)
const minDate = ref(new Date(1900, 0, 1))

const goBack = () => {
  showConfirmDialog({
    title: '提示',
    message: '退出后已填内容无法保存，确定退出吗？',
  })
    .then(() => {
      router.push({
        name: 'daysList',
      })
    })
    .catch(() => {
      // on cancel
    })
}

//表单
const taskForm = ref({
  checkTypeId: '',
  // checkTypeName: '',
  checkModeId: '',
  checkModeName: '',
  placeInfo: {
    partyType: 0, //当事人类型
    placeName: '', //姓名，单位名称，字号名称
    contactsTel: '', //联系电话，单位联系电话
    sex: '1', //性别
    birthDate: '', //生日
    idType: '', //证件类型id
    idTypeName: '', //证件类型
    idCode: '', //证件号
    headName: '', //负责人/法人/经营者 姓名
    headTel: '', //负责人/法人 电话
    registerAddress: '', //详细地址、注册地址
    registerCountyCode: 0, //住址，注册区码
    registerCounty: '', //住址，注册区名
    registerTownCode: 0, //住址，注册街镇码
    registerTown: '', //住址，注册街镇名
    operateAddress: '', //经营详细地址
    operateCountyCode: 0, //经营地区码
    operateCounty: '', //经营地区名
    operateTownCode: 0, //经营地街镇码
    operateTown: '', //经营地街镇名
    lnglat: '',//经纬度
  },
  checkerId: JSON.parse(sessionStorage.getItem('userInfo')).id,
  checkerName: JSON.parse(sessionStorage.getItem('userInfo')).userName, //主办人
  organizerId: '', //协办人id
  organizerName: '', //协办人姓名
})

//打开地图
const gotoMap = () => {

  let type
  if (id.value == '' && !taskForm.value.placeInfo.lnglat) {
    type = 'add'
  } else {
    type = 'location'
  }
  let defaultLocation
  if (type === 'location') {
    defaultLocation = JSON.stringify([
      {
        lnglat: [taskForm.value.placeInfo.lnglat.split(',')[0], taskForm.value.placeInfo.lnglat.split(',')[1]],
      }
    ])
  }
  router.push({
    path: '/testMap',
    query: {
      type,
      defaultLocation,
      path: '/addDaysTask',
      id: id.value,
      taskForm: JSON.stringify(taskForm.value)
    }
  })
}

const showPopover = ref(false)
const actions = ref([])
const actions2 = ref([])
const changePlaceName = async (val) => {
  if (
    taskForm.value.placeInfo.partyType == 1 ||
    taskForm.value.placeInfo.partyType == 3
  ) {
    const res = await usePublic.getNameList(val)
    if (res.code == 0) {
      actions.value = []
      actions2.value = res.data
      res.data.forEach((item) => {
        let obj = {
          text: item.placeName,
        }
        actions.value.push(obj)
      })
      console.log(actions.value)
      showPopover.value = true
    }
  }
}
const actionsSelect = (val) => {
  actions2.value.forEach(async (item) => {
    if (item.placeName == val.text) {
      const res = await usePublic.getPlaceInfo(item.id)
      if (res.code == 0) {
        taskForm.value.placeInfo.partyType = res.data.partyType
        taskForm.value.placeInfo.placeName = res.data.placeName
        taskForm.value.placeInfo.contactsTel = res.data.contactsTel
        if (res.data.birthDate != '') {
          taskForm.value.placeInfo.birthDate = res.data.birthDate
          currentDate.value = res.data.birthDate.split('-')
        }
        taskForm.value.placeInfo.idType = res.data.idType
        taskForm.value.placeInfo.idTypeName = res.data.idTypeName
        taskForm.value.placeInfo.idCode = res.data.idCode
        taskForm.value.placeInfo.headName = res.data.headName
        taskForm.value.placeInfo.headTel = res.data.headTel
        //注册地址，住址
        taskForm.value.placeInfo.registerCountyCode =
          res.data.registerCountyCode
        taskForm.value.placeInfo.registerCounty = res.data.registerCounty
        taskForm.value.placeInfo.registerTownCode = res.data.registerTownCode
        taskForm.value.placeInfo.registerTown = res.data.registerTown
        cascaderValue.value = res.data.registerTownCode
        areaValue.value =
          '长沙市' + res.data.registerCounty + res.data.registerTown
        taskForm.value.placeInfo.registerAddress = res.data.registerAddress

        //经营地址
        taskForm.value.placeInfo.operateCountyCode = res.data.operateCountyCode
        taskForm.value.placeInfo.operateCounty = res.data.operateCounty
        taskForm.value.placeInfo.operateTownCode = res.data.operateTownCode
        taskForm.value.placeInfo.operateTown = res.data.operateTown
        cascaderValue2.value = res.data.operateTownCode
        areaValue2.value =
          '长沙市' + res.data.operateCounty + res.data.operateTown
        taskForm.value.placeInfo.operateAddress = res.data.operateAddress
        taskForm.value.placeInfo.id = res.data.placeInfo.id
      }
    }
  })
}

//选项数据
const picker = ref(false)
const pickerData = ref([])
const pickerType = ref('')
const getCheckTypeData = async (val) => {
  const res = await usePublic.getDictionary(val)
  if (res.code == 0) {
    pickerData.value = []
    res.data.forEach((element) => {
      let obj = {
        text: element.configName,
        value: element.id,
      }
      pickerData.value.push(obj)
    })
  }
}
const pickerConfirm = (val) => {
  console.log(val)
  if (pickerType.value == 'check_type') {
    // taskForm.value.checkTypeId = val.selectedOptions[0].value
    // taskForm.value.checkTypeName = val.selectedOptions[0].text
  } else if (pickerType.value == 'check_mode') {
    taskForm.value.checkModeId = val.selectedOptions[0].value
    taskForm.value.checkModeName = val.selectedOptions[0].text
  } else if (pickerType.value == 'id_type') {
    taskForm.value.placeInfo.idType = val.selectedOptions[0].value
    taskForm.value.placeInfo.idTypeName = val.selectedOptions[0].text
  }
  picker.value = false
}

//检查类型
const checkTypeSelect = () => {
  pickerType.value = 'check_type'
  getCheckTypeData('check_type')
  picker.value = true
}

//协办人选择
const organizerPicker = ref(false)
const organizerData = ref([])
//打开协办人选择
const organizerSelect = () => {
  getOrganizers()
  organizerPicker.value = true
}
//选择协办人
const organizerConfirm = (val) => {
  taskForm.value.organizerId = val.selectedOptions[0].value
  taskForm.value.organizerName = val.selectedOptions[0].text
  organizerPicker.value = false
}
//获取协办人数据源
const getOrganizers = async () => {
  const res = await usePublic.getOrganizer()
  if (res.code == 0) {
    organizerData.value = []
    res.data.forEach((element) => {
      let obj = {
        text: element.userName,
        value: element.id,
      }
      organizerData.value.push(obj)
    })
  }
}

//证件类型
const idTypeSelect = () => {
  pickerType.value = 'id_type'
  getCheckTypeData('id_type')
  picker.value = true
}

//设置当事人类型
const setPartyType = (val) => {
  taskForm.value.placeInfo = {}
  areaValue.value = ''
  areaValue2.value = ''
  taskForm.value.placeInfo.partyType = val
}

//选择出生日期
const birthdatePicker = ref(false)
const columnsType = ['year', 'month', 'day']
const currentDate = ref([])
const birthDateSelect = () => {
  birthdatePicker.value = true
}
const birthdatePickerConfirm = () => {
  taskForm.value.placeInfo.birthDate =
    currentDate.value[0] +
    '-' +
    currentDate.value[1] +
    '-' +
    currentDate.value[2]

  birthdatePicker.value = false
}

//地区选择
const areaShow = ref(false)
const areaValue = ref('')
const cascaderValue = ref('')

const onFinish = (val) => {
  let arr = []
  val.selectedOptions.forEach((item) => {
    arr.push(item.name)
  })
  taskForm.value.placeInfo.registerCountyCode = val.selectedOptions[1].code
  taskForm.value.placeInfo.registerCounty = val.selectedOptions[1].name
  taskForm.value.placeInfo.registerTownCode = val.selectedOptions[2].code
  taskForm.value.placeInfo.registerTown = val.selectedOptions[2].name
  areaValue.value = arr.join('')
  areaShow.value = false
}

//地区选择
const areaShow2 = ref(false)
const areaValue2 = ref('')
const cascaderValue2 = ref('')

const onFinish2 = (val) => {
  console.log(val)
  let arr = []
  val.selectedOptions.forEach((item) => {
    arr.push(item.name)
  })
  taskForm.value.placeInfo.operateCountyCode = val.selectedOptions[1].code
  taskForm.value.placeInfo.operateCounty = val.selectedOptions[1].name
  taskForm.value.placeInfo.operateTownCode = val.selectedOptions[2].code
  taskForm.value.placeInfo.operateTown = val.selectedOptions[2].name
  areaValue2.value = arr.join('')
  areaShow2.value = false
}

//保存任务信息
const backFlag = ref(false)

const onSubmit = async () => {
  console.log(taskForm.value, '11111')
  // if (taskForm.value.checkTypeId == '') {
  //   return showNotify({ type: 'danger', message: '请选择检查类型' })
  // } else 
  if (taskForm.value.organizerName == '') {
    return showNotify({ type: 'danger', message: '请选择协办人' })
  } else if (
    taskForm.value.placeInfo.placeName == '' ||
    !taskForm.value.placeInfo.placeName
  ) {
    return showNotify({ type: 'danger', message: '请输入姓名或单位名称' })
  } else if (
    (taskForm.value.placeInfo.sex == '' || !taskForm.value.placeInfo.sex) &&
    taskForm.value.placeInfo.partyType == 0
  ) {
    return showNotify({ type: 'danger', message: '请选择性别' })
  } else if (
    (taskForm.value.placeInfo.birthDate == '' ||
      !taskForm.value.placeInfo.birthDate) &&
    taskForm.value.placeInfo.partyType == 0
  ) {
    return showNotify({ type: 'danger', message: '请选择出生日期' })
  } else if (
    taskForm.value.placeInfo.contactsTel == '' ||
    !taskForm.value.placeInfo.contactsTel
  ) {
    return showNotify({
      type: 'danger',
      message: '请输入联系方式或单位联系方式',
    })
  } else if (
    (taskForm.value.placeInfo.idType == '' ||
      !taskForm.value.placeInfo.idType) &&
    taskForm.value.placeInfo.partyType == 0
  ) {
    return showNotify({ type: 'danger', message: '请选择证件类型' })
  } else if (
    (taskForm.value.placeInfo.idCode == '' ||
      !taskForm.value.placeInfo.idCode) &&
    taskForm.value.placeInfo.partyType == 0
  ) {
    return showNotify({ type: 'danger', message: '请输入证件号' })
  } else if (
    taskForm.value.placeInfo.idCode.length < 1 || taskForm.value.placeInfo.idCode.length > 18
  ) {
    return showNotify({
      type: 'danger',
      message: '请输入合法证件号或社会信用代码',
    })
  } else if (
    taskForm.value.placeInfo.partyType != 0 &&
    (taskForm.value.placeInfo.headName == '' ||
      !taskForm.value.placeInfo.headName)
  ) {
    return showNotify({
      type: 'danger',
      message: '请输入法人/负责人/经营者姓名',
    })
  } else if (
    taskForm.value.placeInfo.partyType != 0 &&
    taskForm.value.placeInfo.partyType != 2 &&
    (taskForm.value.placeInfo.headTel == '' ||
      !taskForm.value.placeInfo.headTel)
  ) {
    return showNotify({
      type: 'danger',
      message: '请输入法人/负责人/经营者联系方式',
    })
  } else if (
    taskForm.value.placeInfo.registerTownCode == 0 &&
    taskForm.value.placeInfo.partyType != 0
  ) {
    return showNotify({ type: 'danger', message: '请选择注册地址' })
  } else if (
    taskForm.value.placeInfo.registerAddress == '' &&
    taskForm.value.placeInfo.partyType != 0
  ) {
    return showNotify({
      type: 'danger',
      message: '请输入详细注册地址',
    })
  } else if (taskForm.value.placeInfo.operateTownCode == 0) {
    return showNotify({ type: 'danger', message: '请选择住址或经营地址' })
  } else if (taskForm.value.placeInfo.operateAddress == '') {
    return showNotify({
      type: 'danger',
      message: '请输入详细住址或详细经营地址',
    })
  }
  if (id.value == '' || reCheck.value == 1) {
    const res = await useDays.taskSave({ ...taskForm.value, reviewTaskId: id.value || '' })
    if (res.code == 0) {
      showSuccessToast('保存成功')
      if (backFlag.value) {
        const s = await useDays.taskStart(res.data)
        if (s.code == 0) {
          router.push({
            name: 'checkDaysTask',
            query: { id: res.data },
          })
        }
      } else {
        router.push({
          name: 'daysList',
        })
      }
    } else {
      showFailToast(res.message)
    }
  } else {
    Reflect.set(taskForm.value, 'id', id.value)
    const res = await useDays.taskUpdate(taskForm.value)
    if (res.code == 0) {
      showSuccessToast('修改成功')
      if (backFlag.value) {
        const s = await useDays.taskStart(id.value)
        if (s.code == 0) {
          router.push({
            name: 'checkDaysTask',
            query: { id: id.value },
          })
        }
      } else {
        router.go(-1)
      }
    } else {
      showFailToast(res.message)
    }
  }
}
//开始检查
const goCheck = () => {
  backFlag.value = true
  onSubmit()
}

onMounted(async () => {
  let current = new Date()
  let year = current.getFullYear()
  let m = current.getMonth() + 1 // 注意月份从0开始，需要加1
  let d = current.getDate()
  let month = ''
  let day = ''
  if (m < 10) {
    month = '0' + m
  } else {
    month = m + ''
  }
  if (d < 10) {
    day = '0' + d
  } else {
    day = d + ''
  }
  currentDate.value.push(year)
  currentDate.value.push(month)
  currentDate.value.push(day)
  if (id.value != '') {
    const res = await useDays.taskInfo(id.value)
    if (res.code == 0) {
      taskForm.value.checkerId = res.data.checkerId
      taskForm.value.checkerName = res.data.checkerName
      // taskForm.value.checkTypeName = res.data.checkTypeName
      taskForm.value.checkTypeId = res.data.checkTypeId
      taskForm.value.checkModeName = res.data.checkModeName
      taskForm.value.checkModeId = res.data.checkModeId
      taskForm.value.organizerName = res.data.organizerName
      taskForm.value.organizerId = res.data.organizerId
      taskForm.value.placeInfo.partyType = res.data.placeInfo.partyType
      taskForm.value.placeInfo.placeName = res.data.placeInfo.placeName
      taskForm.value.placeInfo.contactsTel = res.data.placeInfo.contactsTel

      //经纬度
      taskForm.value.placeInfo.lnglat = res.data.placeInfo.longitude + ',' + res.data.placeInfo.latitude
      if (res.data.placeInfo.birthDate != '') {
        taskForm.value.placeInfo.birthDate = res.data.placeInfo.birthDate
        currentDate.value = res.data.placeInfo.birthDate.split('-')
      }
      taskForm.value.placeInfo.idType = res.data.placeInfo.idType
      taskForm.value.placeInfo.idTypeName = res.data.placeInfo.idTypeName
      taskForm.value.placeInfo.idCode = res.data.placeInfo.idCode
      taskForm.value.placeInfo.headName = res.data.placeInfo.headName
      taskForm.value.placeInfo.headTel = res.data.placeInfo.headTel
      //注册地址，住址
      taskForm.value.placeInfo.registerCountyCode =
        res.data.placeInfo.registerCountyCode
      taskForm.value.placeInfo.registerCounty =
        res.data.placeInfo.registerCounty
      taskForm.value.placeInfo.registerTownCode =
        res.data.placeInfo.registerTownCode
      taskForm.value.placeInfo.registerTown = res.data.placeInfo.registerTown
      cascaderValue.value = res.data.placeInfo.registerTownCode
      areaValue.value =
        '长沙市' +
        res.data.placeInfo.registerCounty +
        res.data.placeInfo.registerTown
      taskForm.value.placeInfo.registerAddress =
        res.data.placeInfo.registerAddress

      //经营地址
      taskForm.value.placeInfo.operateCountyCode =
        res.data.placeInfo.operateCountyCode
      taskForm.value.placeInfo.operateCounty = res.data.placeInfo.operateCounty
      taskForm.value.placeInfo.operateTownCode =
        res.data.placeInfo.operateTownCode
      taskForm.value.placeInfo.operateTown = res.data.placeInfo.operateTown
      cascaderValue2.value = res.data.placeInfo.operateTownCode
      areaValue2.value =
        '长沙市' +
        res.data.placeInfo.operateCounty +
        res.data.placeInfo.operateTown
      taskForm.value.placeInfo.operateAddress =
        res.data.placeInfo.operateAddress
      taskForm.value.placeInfo.id = res.data.placeInfo.id
    }
  }
  if (route.query.taskForm) {
    taskForm.value = JSON.parse(route.query.taskForm)
  }
})
</script>

<style lang="scss" scoped>
.superviseTask {
  width: 100%;
  height: calc(100%);
  overflow-y: hidden;
  background-color: #ffffff;

  .task {
    width: 100%;
    height: calc(100% - 122px);
    overflow-y: auto;
    margin-top: 46px;
  }
}

.line10 {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}

.partyType {
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;

  .title {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #4d4d4d;
    margin-bottom: 14px;
  }

  .party {
    display: flex;
    align-items: center;
    padding: 0 8px;

    .partyItem1 {
      width: 9.8125rem;
      height: 2.25rem;
      line-height: 2.25rem;
      text-align: center;
      background-color: #f2f2f2;
      border: 1px solid #f2f2f2;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      margin-right: 12px;
      flex-grow: 1;
    }

    .partyItem2 {
      width: 9.8125rem;
      height: 2.25rem;
      line-height: 2.25rem;
      background-color: #f2f2f2;
      border: 1px solid #f2f2f2;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      text-align: center;
      flex-grow: 1;
    }

    .partyItem1Active {
      border: 1px solid #1764ce;
      background-color: rgba(23, 100, 206, 0.1);
      color: #1764ce;
    }
  }
}

.sex {
  padding: 16px;
  display: flex;
  border-bottom: 1px solid #f5f5f5;

  .title {
    width: 130px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #4d4d4d;
  }
}

.area {
  padding: 16px 16px 0 16px;
  // display: flex;
  // border-bottom: 1px solid #f5f5f5;

  .title {
    width: 120px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #4d4d4d;
  }
}
</style>
